


    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    const $ = require("jquery");
   // var FixTable = require("../../components/table/FixTable.js");

    var Table = React.createClass({
        getDefaultProps: function () {
            return {
                height:500,
                list: [
                    {
                        "name": "坑你",
                        "typeDisplayName": "电话费",
                        "remark": "备注001",
                        "name01": "20150505",
                        "supplierStepDisplayName": "的说法",
                        "id": "10001",
                        "css":"zengjia"
                    },
                    {
                        "name": "坑你",
                        "typeDisplayName": "电话费",
                        "remark": "备注001",
                        "name01": "20150505",
                        "supplierStepDisplayName": "的说法",
                        "id": "10001"
                    },
                    {
                        "name": "坑你",
                        "typeDisplayName": "电话费",
                        "remark": "备注001",
                        "name01": "20150505",
                        "supplierStepDisplayName": "的说法",
                        "id": "10001"
                    },
                    {"name": "坑你", "typeDisplayName": "电话费", "remark": "备注001", "name01": "20150505", "supplierStepDisplayName": "的说法", "id": "10001"}
                ],
                param: [
                    {"prop": "name", "title": "供应商名称","exc":function(row){

                        if(row.id){
                            return (
                                <span>row.name</span>
                            )
                        }

                    }},
                    {"prop": "typeDisplayName", "title": "供应商类型"},
                    {"prop": "remark", "title": "备注"},
                    {"prop": "name01", "title": "创建时间"},
                    {"prop": "supplierStepDisplayName", "title": "状态"},
                    {"prop": "supplierStepDisplayName", "title": "操作", "dd": true}
                ]

            };
        },
        fixedPosion:function(){
             var $parent,$table ,height = this.props.height,$th,scrollWidth=0,$target,scrollHeight=0;
            if(this.props.list instanceof Array&&this.props.list.length>0){
                $parent = $(ReactDOM.findDOMNode(this));

                $table = $(".table thead th",$parent),height = this.props.height,$th = $(".top-colum thead th",$parent),scrollWidth=0,$target = $(".table",$parent);
                //height = $(window).height()-$(".container-table-info").offset().top-$(".container-page").outerHeight(true);
                height= this.height;

                scrollWidth = $target[0].offsetWidth - $target[0].clientWidth;
                scrollHeight = $target[0].offsetHeight - $target[0].clientHeight;

                  $target.css({"max-height":height-scrollHeight});
                  //$(".left-colum,.right-colum").css({"max-height":height-17})
                  //$(".top-colum").css({"width":$(".table").width()-17})
                  $(".left-colum,.right-colum",$parent).css({"max-height":height-scrollHeight-scrollHeight})
                  $(".top-colum",$parent).css({"width":$(".table").width()})
                  //$(".top-colum th").css({"width":$(".table").width()})



                  console.log("scroll  width :"+scrollWidth);
                  $(".right-colum",$parent).css({right:scrollWidth});//.fixed-colum-head-right

                  $th.each(function(index) {
                       var $this = $(this);
                       if(index==($th.length-1)){
                            $this.css({
                                width:$table.eq(index).width()+scrollWidth
                            })
                       }else{
                            $this.css({
                                width:$table.eq(index).width()
                            })
                       }

                  });

                  $(".fixed-colum-head-left thead th,.left-colum td",$parent).css({width:$th.eq(0).width()})
                  $(".right-colum td",$parent).css({width:$table.eq($table.length-1).width()})
                  $(".fixed-colum-head-right thead th",$parent).css({width:$table.eq($table.length-1).width()+scrollWidth})
                 // $(".fixed-colum-head-right,.right-colum td").css({width:$th.eq($th.length-1).width()})
                  //
               // var $parent = $target;
                $target.scroll(function () {
                     $(".top-colum,.left-colum",$parent).scrollLeft($target.scrollLeft());
                     $(".left-colum,.right-colum",$parent).scrollTop($target.scrollTop());
                });

            }
        },
        componentDidUpdate:function(){
            this.fixedPosion();
        },
        componentDidMount:function(){
            this.fixedPosion();
        },
        render: function () {
            var Do = this.props.DoSth;
            var $head = [], key, $colum = [], i = 0, j = 0,$leftColum=[],$rightColum=[],$do;

            if(this.props.list instanceof Array&&this.props.list.length>=1){
                 for (; j < this.props.param.length; j++) {
                    $head.push(<Th key={j} param={this.props.param[j]} order={this.props.param[i]}/>);
                }

                for (; i < this.props.list.length; i++) {
                    if(Do){
                        $colum.push(
                            <Column key={i} order={this.props.param} param={this.props.list[i]}>
                                <Do
                                    toDetail={this.props && this.props.toDetail || null}
                                    toEdit={this.props.toEdit} order={this.props.param}
                                    toDelete={this.props && this.props.toDelete || null}
                                    toDelivery={this.props && this.props.toDelivery || null}
                                    toCheck={this.props && this.props.toCheck || null}
                                    toApplyPay={this.props && this.props.toApplyPay || null}
                                    toConfirmPay={this.props && this.props.toConfirmPay || null}
                                    toEditSupplier={this.props && this.props.toEditSupplier || null}
                                    toEditSupplier={this.props && this.props.toAlert || null}
                                    toUpdatePic={this.props && this.props.toUpdatePic || null}
                                    toAuth={this.props && this.props.toAuth || null}
                                    history={this.props.history || null}
                                    param={this.props.list[i]}/>
                            </Column>
                        );
                        $rightColum.push(<tr key={i}><td><Do
                                    toDetail={this.props && this.props.toDetail || null}
                                    toEdit={this.props.toEdit} order={this.props.param}
                                    toDelete={this.props && this.props.toDelete || null}
                                    toDelivery={this.props && this.props.toDelivery || null}
                                    toCheck={this.props && this.props.toCheck || null}
                                    toApplyPay={this.props && this.props.toApplyPay || null}
                                    toConfirmPay={this.props && this.props.toConfirmPay || null}
                                    toEditSupplier={this.props && this.props.toEditSupplier || null}
                                    toUpdatePic={this.props && this.props.toUpdatePic || null}
                                    toAlert={this.props && this.props.toAlert || null}
                                    history={this.props.history || null}
                                    toAuth={this.props && this.props.toAuth || null}
                                    param={this.props.list[i]}/></td>
                        </tr>);
                    }else{
                        $colum.push(
                            <Column key={i} order={this.props.param} param={this.props.list[i]}>
                            </Column>
                        );
                    }

                    $leftColum.push(<tr key={i}><Cell order ={this.props.param[0]} data={this.props.list[i]} param={this.props.list[i][this.props.param[0].prop]} ></Cell></tr>);
                }

                var $topColum = $head;

                var maxIndex = $head.length-1;
               // var css = this.props.param[0].css?this.props.param[0].css:"";
              var top = $(".container-table").length>0?$(".container-table").offset().top:1;
              var  dd = $(window).height()-top-59-39;
              var maxHeight = dd+"px";
              this.height = dd;

                return (
                    <div className="container-table-info" style={{maxHeight}}>
                        <div className="top-colum">
                               <table className="">
                                    <thead>
                                        <tr>
                                           {$head}
                                        </tr>
                                    </thead>
                                </table>
                        </div>
                        <div className="left-colum">
                               <table className="">
                                    <thead>
                                        <tr>
                                           {$head[0]}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {$leftColum}
                                    </tbody>
                                </table>
                        </div>
                        <div className="table">
                            <div className="temp">
                                <table>
                                    <thead>
                                        <tr>
                                            {$head}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {$colum}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                            <div className="right-colum">
                                    <table className="">
                                        <thead>
                                            <tr>
                                                {$head[maxIndex]}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {$rightColum}
                                        </tbody>
                                    </table>
                            </div>
                              <div className="fixed-colum fixed-colum-head-left">
                                   <table className="">
                                        <thead>
                                            <tr>
                                               {$head[0]}
                                            </tr>
                                        </thead>
                                    </table>
                            </div>
                            <div className="fixed-colum fixed-colum-head-right">
                                   <table className="">
                                        <thead>
                                            <tr>
                                                 {$head[maxIndex]}
                                            </tr>
                                        </thead>
                                    </table>
                            </div>
                    </div>
                )
            }else{
                return (
                    <div className="container-table-info">
                    没有查询到数据
                    </div>
                )

            }


        }
    });


    var Th = React.createClass({
        render: function () {
            return (
                <th className={this.props.param.prop}><span>{this.props.param.title}</span></th>
            )
        }
    })

    var Column = React.createClass({
        render: function () {
            var param = this.props.param, $cell = [], i = 0, temp;
            //this.props.children.dd = "fuck"
            return (
                <tr>
                    {(() => {
                        for (; i < this.props.order.length; i++) {
                            temp = this.props.order[i]["prop"];
                            if (this.props.order[i]["dd"]) {
                                $cell.push(<td key={i}>{this.props.children}</td>)
                            } else {
                                $cell.push(<Cell order = {this.props.order[i]}  data={this.props.param} param={param[temp]} key={i}></Cell>)
                            }
                        }
                        return (
                            $cell
                        )
                    })()}
                </tr>
            )
        }
    })

    var Columns = React.createClass({
        render: function () {
            var param = this.props.param, $cell = [], i = 0, temp;
            var dd = this.props.children
            // //console.log("555***********"+JSON.stringify(param))
            ////console.log("order***********"+JSON.stringify(this.props.order))
            for (; i < this.props.order.length; i++) {
                temp = this.props.order[i]["prop"];
                ////console.log(this.props.order[i]["dd"]);
                if (this.props.order[i]["dd"]) {
                    //console.log("*************************************")
                    //console.log(dd)
                    $cell.push(<Cell param={param[temp]} key={i}>
                        {
                            React.Children.map(this.props.children, function (child) {
                                return {child};
                            })
                        }
                    </Cell>)
                } else {
                    $cell.push(<Cell param={param[temp]} key={i}></Cell>)
                }

            }
            /*for(var key in param){
             $cell.push(<Cell param={param[]}></Cell>)
             }*/
            return (
                <tr>
                    {$cell}
                </tr>
            )
        }
    })

    var Cell = React.createClass({
        render: function () {
            var exc = this.props.order.exc;
            if(exc&&this.props.data){
                return(
                    <td>{exc(this.props.data)}</td>
                )
            }else{
                return (
                    <td className={this.props.order.prop}>{this.props.param}
                        {
                            React.Children.map(this.props.children, function (child) {
                                return {child};
                            })
                        }
                    </td>
                )
            }

        }
    })


    module.exports =  Table;
